<template>
  <div class="order">
    <Header>我的订单</Header>
    <tabs v-model:active="status" >
      <tab title="全部" :name="0"></tab>
      <tab title="待付款" :name="1"></tab>
      <tab title="待发货" :name="3"></tab>
      <tab title="待收货" :name="5"></tab>
      <tab title="完成" :name="7"></tab>
    </tabs>

    <section ref="section">
      <div>

        <div class="indent" v-for="indent of showIndent" :key="indent.id">
          <div class="info">
            订单号：{{ indent.order_id }}
          </div>
          <div class="goods-list">

            <div class="goods" v-for="item of indent.items" :key="item.goods.id">
              <img :src="this.baseUrl + item.goods.img_url">
              <div>
                <span>{{ item.goods.name }}</span>
                <span>{{ item.goods.price }} X {{ item.num }}</span>
              </div>
            </div>

          </div>
          <div class="count">
            <button class="btn" @click="handleClick(indent)" v-show="indent.status !== 7">
              {{ indent.status === 1 ? '付款' : indent.status === 3 ? '发货' : indent.status === 5 ? '收货' : '' }}
            </button>
            总价：<span>{{ indent.price }}</span>
          </div>
        </div>

      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import Header from '../components/common/Header.vue'
import Tabbar from "../components/common/Tabbar.vue"
import { payment, indent_all, indent_update } from '@/api/indentApi.js'
import { Tab, Tabs } from 'vant'
import { reactive, ref, onMounted, computed } from 'vue'
//引入better-scroll
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import ObserveImage from '@better-scroll/observe-image'

await payment()

const status = ref(0)

let allIndent = reactive( await indent_all() )
console.log(allIndent)


let showIndent = computed(() => {
  if (status.value === 0) return allIndent
  return allIndent.filter(item => item.status === status.value)
})

const handleClick = (indent) => {
  if (indent.status === 1) {
    indent.status = 3
  } else if (indent.status === 3) {
    indent.status = 5
  } else if (indent.status === 5) {
    indent.status = 7
  }

  indent_update(indent.id, indent.status)
}

//设置页面滚动
const section = ref()
onMounted(() => {
  BScroll.use(ObserveDOM)
  BScroll.use(ObserveImage)
  new BScroll(section.value, {
    observeDOM: true,
    observeImage: true,
    click: true
  })
})
</script>

<style lang="less" scoped>
.order {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  section {
    flex: 1;
    overflow: hidden;
    background-color: #f5f5f5;
    >div {
      .indent{
        margin-top: 15px;
        background: #fff;
        .info {
          color: #696969;
          font-size: 14px;
          padding: 10px;
        }

        .goods-list{
          .goods {
            border-top: solid 1px #f5f5f5;
            border-bottom: solid 1px #f5f5f5;
            height: 100px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            padding: 10px 10px;
            img {
              width: 85px;
              height: 85px;
            }
            div{
              display: flex;
              flex-direction: column;
              height: 100%;
              box-sizing: border-box;
              margin-left: 15px;
              padding: 4px 0;
              span{
                font-size: 14px;
                color: #222;
              }
              span:nth-of-type(2) {
                margin-top: auto;
                color: #b0352f;
              }
            }
          }
        }

        .count{
          padding: 10px 15px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          font-size: 14px;
          span{
            color: #b0352f;
          }

          .btn {
            border: none;
            border-radius: 3px;
            padding: 2px 18px;
            margin-right: 10px;
            font-size: 14px;
          }
        }
        
      }
    }
  }
}
</style>